<template>
    <div class="attractions-detail">
      <headers></headers>
      
      <!-- 主要信息区域 -->
      <div class="main-content">
        <div class="detail-container">
          <!-- 轮播图区域 -->
          <div class="carousel-section">
            <el-carousel 
              height="500px" 
              indicator-position="outside"
              :interval="4000"
              arrow="hover"
            >
              <el-carousel-item 
                v-for="(item,index) in getImages" 
                :key="index"
              >
                <div 
                  class="carousel-image" 
                  :style="{backgroundImage: `url(${item})`}"
                ></div>
              </el-carousel-item>
            </el-carousel>
          </div>
  
          <!-- 景点信息区域 -->
          <div class="info-section">
            <h1 class="attraction-title">{{info.name || ''}}</h1>
            <div class="price-info">
              <span class="price">¥{{info.price || 0}}</span>
              <span class="stock">库存: {{info.num || 0}}</span>
              <el-tag 
                :type="info.realName == 1 ? 'warning' : 'info'"
                size="small"
              >
                {{info.realName == 1 ? '需要实名' : '无需实名'}}
              </el-tag>
            </div>
            <div class="intro-text">{{info.introduce || ''}}</div>
            <el-button 
              type="primary" 
              class="book-btn"
              @click="toOrder"
              icon="el-icon-date"
            >
              立即预约
            </el-button>
          </div>
        </div>
      </div>
  
      <!-- 详细信息区域 -->
      <div class="detail-info">
        <el-tabs type="border-card">
          <el-tab-pane label="景点介绍">
            <div class="info-content">
              <div class="info-section">
                <h3><i class="el-icon-info"></i> 详细介绍</h3>
                <p>{{info.content || '暂无介绍'}}</p>
              </div>
              <div class="info-section">
                <h3><i class="el-icon-warning"></i> 预约须知</h3>
                <p>{{info.open || '暂无信息'}}</p>
              </div>
              <div class="info-section">
                <h3><i class="el-icon-time"></i> 开放时间</h3>
                <p>{{info.time || '暂无信息'}}</p>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="游客评论">
            <!-- 评论输入区 -->
            <div class="comment-input">
              <el-input
                v-model="content"
                type="textarea"
                :rows="4"
                placeholder="分享您的游玩体验..."
              ></el-input>
              <div class="rating-wrapper">
                <span class="rating-label">为景点评分：</span>
                <el-rate 
                  v-model="score"
                  :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                ></el-rate>
              </div>
              <el-button 
                type="primary"
                @click="saveSysComments"
                :disabled="!content"
                :loading="commentLoading"
              >
                发表评论
              </el-button>
            </div>
  
            <!-- 评论列表 -->
            <div class="comments-list">
              <div 
                v-for="(item,index) in tableData" 
                :key="index"
                class="comment-item"
              >
                <div class="comment-user">
                  <el-avatar :src="$store.state.HOST + item.avatar"></el-avatar>
                  <span class="username">{{item.createBy}}</span>
                  <el-rate 
                    v-model="item.score" 
                    disabled 
                    show-score
                    text-color="#ff9900"
                  ></el-rate>
                </div>
                <div class="comment-content">{{item.content}}</div>
                <div class="comment-time">{{item.createTime}}</div>
              </div>
            </div>
  
            <!-- 分页器 -->
            <el-pagination
              background
              :page-size="search.pageSize"
              layout="prev, pager, next"
              @current-change="handleCurrentChange"
              :total="total"
              class="pagination"
            >
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
      </div>
  
      <!-- 预约弹窗 -->
      <el-dialog
        title="预约信息"
        :visible.sync="dialogVisible"
        width="50%"
        class="booking-dialog"
      >
        <div class="booking-form">
          <el-form :model="bookingForm" ref="bookingForm" label-width="100px">
            <el-form-item label="预约人数">
              <el-input-number 
                v-model="num" 
                :min="1" 
                :max="10"
                size="small"
              ></el-input-number>
            </el-form-item>
  
            <el-form-item label="预约日期">
              <el-date-picker
                v-model="date1"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
  
            <!-- 预约人信息 -->
            <div 
              v-for="(person, index) in people" 
              :key="index"
              class="visitor-info"
            >
              <div class="visitor-header">
                <h4>访客 {{index + 1}}</h4>
                <div class="visitor-actions">
                  <i 
                    v-if="index === people.length - 1" 
                    class="el-icon-circle-plus-outline"
                    @click="addKeyword"
                  ></i>
                  <i 
                    v-if="index !== 0" 
                    class="el-icon-delete"
                    @click="minusKeyword(index)"
                  ></i>
                </div>
              </div>
              
              <el-form-item label="姓名">
                <el-input v-model="person.name" placeholder="请输入姓名"></el-input>
              </el-form-item>
              
              <el-form-item label="电话">
                <el-input v-model="person.tel" placeholder="请输入电话"></el-input>
              </el-form-item>
              
              <el-form-item v-if="info.realName == 1" label="身份证号">
                <el-input v-model="person.idCard" placeholder="请输入身份证号"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
        
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeOrder">取 消</el-button>
          <el-button type="primary" @click="saveOrder" :loading="submitLoading">确 定</el-button>
        </span>
      </el-dialog>
  
      <bottoms></bottoms>
    </div>
  </template>
  
  <script>
  import { getSysAttractionsById, saveSysAttractionOrder, getSysCommentsPage, saveSysComments } from '../../api/api'
  import headers from '@/components/header'
  import bottoms from '@/components/bottom'
  
  export default {
    name: 'AttractionsInfo',
    components: {
      headers,
      bottoms
    },
    data() {
      return {
        id: "",
        dialogVisible: false,
        search: {
          attractionsId: "",
          pageSize: 10,
          pageNumber: 1,
        },
        info: {},
        total: 0,
        tableData: [],
        content: "",
        score: 0,
        num: 1,
        date1: "",
        userId: null,
        people: [
          {
            name: "",
            tel: "",
            idCard: ""
          }
        ],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        },
        commentLoading: false,
        submitLoading: false,
        bookingForm: {}
      }
    },
    computed: {
      getImages() {
        return this.info.images ? this.info.images.split(',') : []
      }
    },
    methods: {
      async saveSysComments() {
        if (!this.content) {
          this.$message.warning('请输入评论内容')
          return
        }
        
        try {
          this.commentLoading = true
          const param = {
            content: this.content,
            score: this.score,
            attractionsId: this.id,
            userId: this.userId
          }
          
          const res = await saveSysComments(param)
          if (res.code === 1000) {
            this.$message.success('评论成功')
            this.content = ""
            this.score = 0
            this.getSysCommentsPage()
          }
        } catch (error) {
          this.$message.error('评论失败，请稍后重试')
        } finally {
          this.commentLoading = false
        }
      },
      
      async getSysCommentsPage() {
        try {
          this.search.attractionsId = this.id
          const res = await getSysCommentsPage(this.search)
          if (res.code === 1000) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        } catch (error) {
          this.$message.error('获取评论失败')
        }
      },
      
      closeOrder() {
        this.date1 = ""
        this.num = 1
        this.people = [
          {
            name: "",
            tel: "",
            idCard: ""
          }
        ]
        this.dialogVisible = false
      },
      
      async saveOrder() {
        if (!this.validateOrder()) return
        
        try {
          this.submitLoading = true
          const param = {
            attractionsId: this.id,
            num: this.num,
            time: this.date1,
            people: JSON.stringify(this.people)
          }
          
          const res = await saveSysAttractionOrder(param)
          if (res.code === 1000) {
            this.$message.success('预约成功，请等待确认')
            this.closeOrder()
          } else {
            this.$message.warning(res.message)
          }
        } catch (error) {
          this.$message.error('预约失败，请稍后重试')
        } finally {
          this.submitLoading = false
        }
      },
      
      validateOrder() {
        if (!this.date1) {
          this.$message.warning('请选择预约时间')
          return false
        }
        
        if (this.people.length < this.num) {
          this.$message.warning('请完善预约人信息')
          return false
        }
        
        if (this.people.length > this.num) {
          this.$message.warning('预约人信息超出预约人数')
          return false
        }
        
        for (let i = 0; i < this.people.length; i++) {
          const item = this.people[i]
          if (!item.name) {
            this.$message.warning('请完善预约人姓名')
            return false
          }
          if (!item.tel) {
            this.$message.warning('请完善预约人联系方式')
            return false
          }
          if (this.info.realName == 1 && !item.idCard) {
            this.$message.warning('请完善预约人证件号')
            return false
          }
        }
        
        return true
      },
      
      async getSysAttractionsById() {
        try {
          const res = await getSysAttractionsById({id: this.id})
          if (res.code === 1000) {
            this.info = res.data
          }
        } catch (error) {
          this.$message.error('获取景点信息失败')
        }
      },
      
      toOrder() {
        this.dialogVisible = true
      },
      
      addKeyword() {
        this.people.push({
          name: "",
          tel: "",
          idCard: ""
        })
      },
      
      minusKeyword(index) {
        this.people.splice(index, 1)
      },
      
      handleCurrentChange(val) {
        this.search.pageNumber = val
        this.getSysCommentsPage()
      }
    },
    mounted() {
      this.id = this.$route.query.id
      const userInfo = JSON.parse(window.localStorage.getItem("user_info"))
      this.userId = userInfo ? userInfo.id : null
      this.getSysAttractionsById()
      this.getSysCommentsPage()
    }
  }
  </script>
  
  <style scoped>
  .attractions-detail {
    background-color: #f5f7fa;
    min-height: 100vh;
  }
  
  .main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
  }
  
  .detail-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    overflow: hidden;
  }
  
  .carousel-section {
    width: 100%;
    position: relative;
  }
  
  .carousel-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
  }
  
  .carousel-image:hover {
    transform: scale(1.05);
  }
  
  .info-section {
    padding: 30px;
  }
  
  .attraction-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
  }
  
  .price-info {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .price {
    font-size: 28px;
    color: #ff6b6b;
    font-weight: bold;
  }
  
  .stock {
    color: #666;
    font-size: 16px;
  }
  
  .intro-text {
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px;
    font-size: 16px;
  }
  
  .book-btn {
    padding: 12px 30px;
    font-size: 16px;
  }
  
  .detail-info {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
  }
  
  .info-content {
    padding: 30px;
  }
  
  .info-section {
    margin-bottom: 30px;
  }
  
  .info-section h3 {
    color: #333;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .info-section p {
    color: #666;
    line-height: 1.8;
    font-size: 16px;
  }
  
  .comment-input {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
  }
  
  .rating-wrapper {
    margin: 15px 0;
    display: flex;
    align-items: center;
  }
  
  .rating-label {
    margin-right: 10px;
    color: #666;
  }
  
  .comments-list {
    margin-top: 30px;
  }
  
  .comment-item {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
  }
  
  .comment-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  
  .comment-user {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
  }
  
  .username {
    color: #333;
    font-weight: 500;
    font-size: 16px;
  }
  
  .comment-content {
    color: #666;
    line-height: 1.8;
    font-size: 16px;
    margin-bottom: 10px;
  }
  
  .comment-time {
    color: #999;
    font-size: 14px;
  }
  
  .booking-dialog {
    .el-dialog__body {
      padding: 30px;
    }
  }
  
  .booking-form {
    .visitor-info {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
    }
    
    .visitor-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      h4 {
        margin: 0;
        color: #333;
      }
    }
    
    .visitor-actions {
      display: flex;
      gap: 10px;
      
      i {
        cursor: pointer;
        font-size: 18px;
        color: #409EFF;
        
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
  
  .pagination {
    margin-top: 30px;
    text-align: center;
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .main-content {
      padding: 20px 10px;
    }
    
    .attraction-title {
      font-size: 24px;
    }
    
    .price-info {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
    
    .info-section {
      padding: 20px;
    }
    
    .booking-dialog {
      width: 90% !important;
    }
  }
  </style>